<template>
  <view class="user-bottom-list">
    <template v-for="(item, i) in userList" :key="i">
      <view v-if="item.show" class="user_box" @click="itemClick(item)">
        <view class="user_title">{{ item.title }}</view>
        <text class="ali-icon">&#xe6c7;</text>
      </view>
    </template>
  </view>
</template>

<script setup lang="ts">
  import { navigateTo } from '@/router';
  import type { PagesType } from '@/router/types/pages';
  import { computed, ref, type Ref } from 'vue';
  import { useUserStoreWithOut } from '@/store/modules/user';
  import { storeToRefs } from 'pinia';
  import type { FunctionArgs } from '@vueuse/core';
  import { isFunction } from 'lodash-es';
  import { authOfficialAccount } from '@/utils';
  import type { EmitShowCustomShareType } from '../utils';

  interface UserListItem {
    title: string;
    path?: PagesType;
    show: boolean | Ref<boolean>;
    fn?: FunctionArgs;
  }

  const useUser = useUserStoreWithOut();
  const { userInfo } = storeToRefs(useUser);
  const getPhonenumber = computed(() => !!userInfo.value.phonenumber);

  const emits = defineEmits<{
    /** invite 邀请入会  relevancy 公众号关联  */
    (e: 'showCustomShare', type: EmitShowCustomShareType): void;
  }>();

  const userList = ref<UserListItem[]>([
    {
      title: '我的资料',
      fn: () => navigateTo({ name: 'myProfile', options: {} }),
      show: true,
    },
    {
      title: '邀请入会',
      fn: () => {
        emits('showCustomShare', 'invite');
      },
      show: getPhonenumber,
    },
    {
      title: '公众号关联',
      fn: async () => {
        try {
          await authOfficialAccount();
        } catch (error) {}
        emits('showCustomShare', 'relevancy');
      },
      show: getPhonenumber,
    },
    {
      title: '更新单位身份',
      fn: () => useUser.logOut(),
      show: getPhonenumber,
    },
    {
      title: '联系我们',
      path: 'contactUs',
      show: true,
    },
    {
      title: '用户协议及隐私协议',
      path: 'userAgreement',
      show: true,
    },
  ]);

  function itemClick(item: UserListItem) {
    if (isFunction(item.fn)) {
      return item.fn?.();
    }
    item.path && toRouter(item.path);
  }

  const toRouter = (path: string) => {
    path && navigateTo({ name: path as any });
  };
</script>

<style lang="scss" scoped>
  .user-bottom-list {
    background-color: #fff;
    border-radius: 10rpx;
    .user_box {
      height: 98rpx;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: space-between;
      margin: 0 30rpx;
      border-bottom: 1px solid #ddd;
      color: #333;
      font-size: 27rpx;
      &:nth-last-child(1) {
        border-bottom: none;
      }

      > .ali-icon {
        font-size: 40rpx;
      }
    }
  }
</style>
